<!-- <ion-header >
  <ion-navbar style="background-color:#333 !important;color:#fff !important" >
      <ion-title>扫描中……</ion-title>
  </ion-navbar>
</ion-header>
<ion-content no-scroll class="qrscanner" >
  <div class="qrscanner-area">    
  </div> 
   <div class="through-line"></div>
  <div class="button-bottom">
      <button (click)="toggleLight()" ion-fab class="icon-camera" margin-right>
          <ion-icon name="flash"></ion-icon>                  
      </button>
      <button (click)="toggleCamera()" ion-fab class="icon-camera">
          <ion-icon name="reverse-camera"></ion-icon>                  
      </button>
  </div>    
</ion-content> -->



<ion-header>

  <ion-navbar style="background-color:#333 !important;">
    <ion-title>扫一扫</ion-title>
    <ion-buttons>
      <button style="background-color:#333;position:absolute;left:-2rem;top:-0.8rem">
        <span ion-text showWhen="android" nav-transition='none' 
        style="color:#fff;background-color:#333;z-index:9999">取消</span>
        <ion-icon name="md-arrow-back" nav-transition='none' showWhen="ios" 
         style="z-index:9999;color:#fff;background-color:#333"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>
<ion-content no-scroll class="qrscanner">
  <div class="all" style="width:100%;height:100%;background:transparent;">
    <!-- 扫描二维码 -->
    <div [ngClass]="{scannerBox:showScanner==true}" *ngIf="showScanner">
      <div class="scannerImg">
        <img style="width:100%;height:100%" src="assets/img/kuangkuang@2x.png" alt="">
        <div class="line">
          <img style="width:100%;height:100%" src="assets/img/saomiao@2x.png" alt="">
        </div>
      </div>

      <p text-center style="color:#fff">请将对应订单生成的二维码放入框内</p>
    </div>


    <!-- 输入劵码 -->
    <!--  设置了 最小高度 并且 设置了overflow ：hidden 使调出键盘的时候不会出现样式坍塌 -->
    <div [ngClass]="{showWriteCode:showWritecode==true}"  [style.min-height]='screenHeight' *ngIf="showWritecode">
      <!-- <h2 >输入劵码</h2> -->
      <div style="padding-top:5rem">
        <div class="inputImg">
          <img style="width:100%;height:100%;" src="assets/img/juanmaqueren@2x.png" alt="">
        </div>
        <h3 text-center>使用劵码确认</h3>
        <div class="searchBar">
          <ion-searchbar [(ngModel)]="inpuPayCode.pay_code" (ionInput)="inputPayCodeAPI($event)" type="number" placeholder="请输入订单对应的劵码"></ion-searchbar>
          <!-- <ion-input style="padding-left:2rem;line-height:2.5rem;"
          
           (ionInput)="inputPayCodeAPI($event)"
           clearInput
            [(ngModel)]="inpuPayCode.pay_code" type="text" placeholder="请输入订单对应的劵码"></ion-input> -->
        </div>
      </div>
    </div>

    <!-- 选择获取订单方式 -->
    <div class="chioceScan">
      <ion-grid>
        <ion-row>
          <ion-col col-2>

          </ion-col>
          <ion-col col-3>

            <div class="scannerCode" (tap)="showScan()">
              <img src="assets/img/saomiaoerweima@2x.png" alt="">
              <p>扫描二维码</p>
            </div>


          </ion-col>
          <ion-col col-2>
            <p style="margin-top:2rem;font-size:2.2rem;">or</p>
          </ion-col>
          <ion-col col-3>
            <div class="writeCode" (tap)="showWriteCode()">
              <img src="assets/img/shurujuanma@2x.png" alt="">
              <p style="color:#e15959">输入劵码</p>
            </div>

          </ion-col>
          <ion-col col-2>

          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>



</ion-content>